<template>
  <div class="hot">
    <!-- banner图 -->
    <div class="banner">
      <div class="bg"></div>
      <span>更新日期： {{ time | formatDate("MM月dd日") }} </span>
    </div>

    <!-- 播放列表 -->
    <music-list
      v-if="showList.length > 0"
      @play="play"
      :shownum="true"
      :musiclist="showList"
      :currentmusic="currentmusic"
    ></music-list>
    <load-animate></load-animate>
    <div class="loadmore" @click="loadMore" ref="loadmore">
      {{ page >= (hotList.length - 1) / 20 ? "已经到底" : "加载更多..." }}
    </div>
  </div>
</template>

<script>
import MusicList from "@/components/MusicList";
export default {
  props: {
    currentmusic: {
      type: Object,
      default: () => {
        return null;
      },
    },
  },
  components: { MusicList },
  data() {
    return {
      hotList: [],
      time: 0,
      page: 1,
    };
  },
  created() {
    this.getHotSong();
  },
  mounted() {
    window.addEventListener("scroll", this.windowScroll);
  },
  methods: {
    windowScroll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let loadMoreoffsetTop = this.$refs.loadmore.offsetTop;
      let clientHeight = window.innerHeight;
      // console.log(
      //   "卷去的距离==>",
      //   scrollTop,
      //   "窗口高度==>",
      //   clientHeight,
      //   "loadmore距离最顶的距离",
      //   loadMoreoffsetTop
      // );

      if (scrollTop + clientHeight >= loadMoreoffsetTop + 200) {
        //49
        this.page++;
      }
    },
    loadMore() {
      this.page++;
    },
    async getHotSong() {
      await this.axios.get("/playlist/detail?id=3778678").then((re) => {
        console.log("热歌榜==》", re);
        this.time = re.playlist.updateTime;
        this.hotList = re.playlist.tracks.map((item, index) => {
          item.song = {
            alias: item.alia,
            privilege: re.privileges[index],
            artists: item.ar,
            album: item.al,
          };
          return item;
        });
        console.log("this==>hotlist==>", this.hotList);
      });
    },

    play(event) {
      // console.log('music===>',event);
      this.$emit("play", event);
    },

    // getDate() {
    //   let d = new Date();
    //   let M = d.getMonth() + 1;
    //   M = M < 10 ? "0" + M : M;
    //   D = D < 10 ? "0" + D : D;
    //   let D = d.getDate();
    //   console.log(M);
    //   console.log(D);
    //   return M + "月" + D + "日";
    // },
  },
  computed: {
    showList() {
      let end = this.page * 20;
      return this.hotList.slice(0, end);
    },
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.windowScroll);
  },
  beforeRouterLeave(to, from, next) {
    window.removeEventListener("scroll", this.windowScroll);
    next();
  },
};
</script>

<style lang="scss" scoped>
.hot {
  width: 100%;
  position: relative;
  .banner {
    width: 100%;
    height: 146px;
    background-color: red;
    background: url("@/assets/banner.jpg") no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20px;
    z-index: 2;

    .bg {
      width: 142px;
      height: 67px;
      background: url("@/assets/icon.png") no-repeat -48px -60px;
      background-size: 166px 97px;
      background-position: -24px -30px;
    }
    span {
      margin-top: 10px;
      color: hsla(0, 0%, 100%, 0.8);
      font-size: 12px;
    }
    &::after {
      content: " ";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      background-color: rgba(0, 0, 0, 0.2);
    }
  }

  .loadmore {
    text-align: center;
    font-size: 14px;
    color: #ccc;
    line-height: 50px;
  }
}
</style>